<template>
    <div>
        <div style="margin-left: 150px; margin-right: 150px; margin-top: 100px;">
            <el-form :model="eventInfo" ref="form" label-width="100px">
                <h1>基本信息</h1>
                <el-divider></el-divider>
                <el-form-item label="活动标题">
                    <el-input v-model="eventInfo.title" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="举办时间">
                    <el-date-picker
                        v-model="tempTime"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时刻"
                        end-placeholder="结束时刻">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动地址">
                    <el-input v-model="eventInfo.location" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="活动介绍">
                    <el-input v-model="eventInfo.details" type="textarea" placeholder=""></el-input>
                </el-form-item>

                <h1>票种信息</h1>
                <el-divider></el-divider>
                <el-button type="primary" @click="addTicket()">添加票种</el-button>
                <div>
                    <el-col :span="6">
                        <h3>名称</h3>
                    </el-col>                   
                    <el-col :span="6">
                        <h3>价格</h3>
                    </el-col>
                    <el-col :span="6">
                        <h3>数量</h3>
                    </el-col>
                    <el-col :span="6">
                        <h3>操作</h3>
                    </el-col>
                    <el-card v-for="(item, index) in eventInfo.tickets" :key="index" shadow="hover">
                        <el-col :span="6">
                            <h3>{{item.name}}</h3>
                        </el-col>
                        <el-col :span="6">
                            <h3>¥ {{item.price}}</h3>
                        </el-col>
                        <el-col :span="6">
                            <h3>{{item.sum}}</h3>
                        </el-col>                        
                        <el-col :span="6">                            
                            <el-button type="success" icon="el-icon-info" @click="reviewTicket(index)"></el-button>
                            <el-button type="primary" icon="el-icon-edit" @click="reviseTicket(index)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="deleteTicket(index)"></el-button>
                        </el-col>
                    </el-card>
                </div>
                <div>

                </div>
            </el-form>

            <div style="text-align: center; margin-top: 50px;">
                <el-divider></el-divider>
                <el-button type="primary" @click="createEvent()">保存</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible_ticket" title="票种信息" width="400px" center>
            <el-scrollbar style="height: 500px;">
                <div style="margin-right: 20px; margin-left: 20px;">
                    <el-form :model="ticketInfo" ref="ticketInfo"> 
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="ticketInfo.name" placeholder="" :readonly="dialogStatus=='review'"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="ticketInfo.price" placeholder="" :readonly="dialogStatus=='review'"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="sum">
                            <el-input v-model="ticketInfo.sum" placeholder="" :readonly="dialogStatus=='review'"></el-input>
                        </el-form-item>
                        <el-form-item label="单人最大购买量" prop="maxNum">
                            <el-input v-model="ticketInfo.maxNum" placeholder="" :readonly="dialogStatus=='review'"></el-input>
                        </el-form-item>  
                        <el-form-item label="可退票" prop="returnable">
                            <el-checkbox v-model="ticketInfo.returnable" :disabled="dialogStatus=='review'"></el-checkbox>
                        </el-form-item>  
                        <el-form-item label="可转让" prop="transferable">
                            <el-checkbox v-model="ticketInfo.transferable" :disabled="dialogStatus=='review'"></el-checkbox>
                        </el-form-item>  
                        <el-form-item label="售票截止时间" prop="saleEndTime">
                            <el-date-picker
                                v-model="ticketInfo.saleEndTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder=""
                                :readonly="dialogStatus=='review'">
                            </el-date-picker>
                        </el-form-item>  
                        <el-form-item label="有效期截止时间" prop="validBefore">
                            <el-date-picker
                                v-model="ticketInfo.validBefore"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder=""
                                :readonly="dialogStatus=='review'">
                            </el-date-picker>                    
                        </el-form-item>  
                        <el-form-item v-if="ticketInfo.returnable" label="退票截止时间" prop="returnEndTime">
                            <el-date-picker
                                v-model="ticketInfo.returnEndTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="" 
                                :readonly="dialogStatus=='review'">
                            </el-date-picker>                        
                        </el-form-item>  
                        <el-form-item v-if="ticketInfo.transferable" label="转让截止时间" prop="transferEndTime">
                            <el-date-picker
                                v-model="ticketInfo.transferEndTime"
                                type="datetime"                                
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder=""
                                :readonly="dialogStatus=='review'">
                            </el-date-picker>                       
                        </el-form-item>  
                        <el-form-item label="描述" prop="description">
                            <el-input type="textarea" v-model="ticketInfo.description" placeholder="" :readonly="dialogStatus=='review'"></el-input>
                        </el-form-item>  
                    </el-form>
                    <span slot="footer">
                        <el-button type="primary" v-if="dialogStatus=='add'" @click="saveTicket()">保存</el-button>
                        <el-button type="primary" v-if="dialogStatus=='revise'" @click="saveRevision()">保存</el-button>
                    </span>
                </div>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            dialogVisible_ticket: false,
            dialogStatus: '',

            tempTime: '',
            eventInfo: {
                organizer_id: '',
                title: '',
                start_time: '',
                end_time: '',
                location: '',
                details: '',
                tickets: [],
            },
            ticketInfo: {
                name: '',
                price: '',
                sum: '',
                maxNum: '',
                returnable: false,
                transferable: false,
                validBefore: '',
                returnEndTime: '',
                transferEndTime: '',
                saleEndTime: '',
                description: '',
            },

            selectedTicketIndex: '',
        }
    },
    created() {
        this.eventInfo.organizer_id = this.userId;
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        addTicket() {
            this._clearTicketInfo();
            this.dialogStatus = 'add';
            this.dialogVisible_ticket = true;
        }, 
        reviewTicket(index) {
            this.dialogStatus = 'review';
            this._getTicketInfo(index);
            this.dialogVisible_ticket = true;
        },
        reviseTicket(index) {
            this.dialogStatus = 'revise';
            this._getTicketInfo(index);
            this.selectedTicketIndex = index;
            this.dialogVisible_ticket = true;
        },
        saveTicket() {
            var index = this.eventInfo.tickets.length;
            this._setTicketInfo(index);
            this.dialogVisible_ticket = false;
        },
        saveRevision() {
            this._setTicketInfo(this.selectedTicketIndex);
            this.dialogVisible_ticket = false;
        },
        deleteTicket(index) {
            this.eventInfo.tickets.splice(index, 1);
        },
        createEvent() {
            // location.reload();
            // this.$router.go(0);
            this.eventInfo.start_time = this.tempTime[0];
            this.eventInfo.end_time = this.tempTime[1];
            this.api({
                url: "/event/createEvent",
                method: "post",
                data: this.eventInfo
            }).then(data => {
                this._cleareventInfo();
                this.$message({
                    message: "您已成功发布活动",
                    type: 'success'
                })
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("发布活动失败")
            })
            this._cleareventInfo();
        },
        
        _cleareventInfo() {
            this.eventInfo.title = '';
            this.eventInfo.start_time = '';
            this.eventInfo.end_time = '';
            this.eventInfo.location = '';
            this.eventInfo.details = '';
            this.eventInfo.tickets = [];

            this.tempTime = '';
        },
        _clearTicketInfo() {
            this.ticketInfo.name = '';
            this.ticketInfo.price = '';
            this.ticketInfo.sum = '';
            this.ticketInfo.maxNum = '';
            this.ticketInfo.returnable = false;
            this.ticketInfo.transferable = false;
            this.ticketInfo.validBefore = '';
            this.ticketInfo.returnEndTime = '';
            this.ticketInfo.transferEndTime = '';
            this.ticketInfo.saleEndTime = '';
            this.ticketInfo.description = '';
        },
        _getTicketInfo(index) {
            this.ticketInfo.name = this.eventInfo.tickets[index].name;
            this.ticketInfo.price = this.eventInfo.tickets[index].price;
            this.ticketInfo.sum = this.eventInfo.tickets[index].sum;
            this.ticketInfo.maxNum = this.eventInfo.tickets[index].maxNum;
            this.ticketInfo.returnable = this.eventInfo.tickets[index].returnable;
            this.ticketInfo.transferable = this.eventInfo.tickets[index].transferable;
            this.ticketInfo.validBefore = this.eventInfo.tickets[index].validBefore;
            this.ticketInfo.returnEndTime = this.eventInfo.tickets[index].returnEndTime;
            this.ticketInfo.transferEndTime = this.eventInfo.tickets[index].transferEndTime;
            this.ticketInfo.saleEndTime = this.eventInfo.tickets[index].saleEndTime;
            this.ticketInfo.description = this.eventInfo.tickets[index].description;            
        },
        _setTicketInfo(index) {
            this.eventInfo.tickets[index] = { 
                name: this.ticketInfo.name,
                price: this.ticketInfo.price,
                sum: this.ticketInfo.sum,
                maxNum: this.ticketInfo.maxNum,
                returnable: this.ticketInfo.returnable,
                transferable: this.ticketInfo.transferable,
                validBefore: this.ticketInfo.validBefore,
                returnEndTime: this.ticketInfo.returnEndTime,
                transferEndTime: this.ticketInfo.transferEndTime,
                saleEndTime: this.ticketInfo.saleEndTime,
                description: this.ticketInfo.description,
            };
        },
    },
}
</script>

<style scoped>


</style>